<script>
import { t } from '@src/locales'

export default {
  name: 'config-contact-dynamic',
  props: {
    shareData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      menus: [],
      currMenu: 'owner',
      currMenuItem: 'creator'
    };
  },
  computed: {
    /* 子菜单 */
    menuItem() {
      let menuItem = this.menus.find(menu => menu.value == this.currMenu);
      return menuItem || {};
    },
    /* 上级主管 */
    isManager() {
      return this.currMenu == 'manager';
    }
  },
  mounted() {
    this.menus = this.buildMenus();
  },
  methods: {
    /* 构建menus */
    buildMenus() {
      return [
        {
          displayName: t('common.label.nodeLeader'),
          value: 'owner',
          type: 5,
          children: [
            {
              label: t('common.label.sponsor'),
              id: 'CREATE_USER'
            }
          ]
        }
      ];
    },
    /* 节点选中/取消选中 */
    handleCheck(data, checked) {
      if (this.menuItem.subChildren) return;

      this.update(
        { id: data.id, name: data.label },
        checked,
        this.menuItem.type
      );
    },
    /* 删除选中 */
    handleDelete(data) {
      this.$refs.contactTree.setChecked(data, false);
    },
    /* 更新选中数据 */
    update(data, checked, type) {
      this.$emit('update', { data, checked, type });
    },
    /* 渲染树Dom */
    renderMenuTree(h) {
      return (
        <el-tree
          ref="contactTree"
          data={this.menuItem.children}
          node-key="id"
          show-checkbox
          check-on-click-node
          highlight-current
          default-checked-keys={this.shareData.value}
          on-check-change={this.handleCheck}
        ></el-tree>
      );
    },
    renderDynamicContentLeftDom(h) {
      if (this.isManager) {
        return <dynamic-menu menus={this.menus} value={this.currMenu} />;
      }

      return this.renderMenuTree(h);
    },
    renderDynamicContentRight(h) {
      return <div class="dynamic-content-right">{this.renderMenuTree(h)}</div>;
    }
  },
  render(h) {
    return (
      <div class="dynamic-panel">
        <dynamic-menu
          menus={this.menus}
          value={this.currMenu}
          update={value => {
            this.currMenu = value;
          }}
        />

        <div class="dynamic-content">
          <div class="dynamic-content-left">
            {this.renderDynamicContentLeftDom(h)}
          </div>
          {this.isManager && this.renderDynamicContentRight(h)}
        </div>
      </div>
    );
  },
  components: {
    'dynamic-menu': {
      name: 'dynamic-menu',
      props: {
        update: Function,
        menus: {
          type: Array,
          default: () => []
        },
        value: {
          type: String,
          default: ''
        }
      },
      render(h) {
        return (
          <div class="dynamic-menu">
            {this.menus.map(menu => {
              return (
                <div
                  class={[
                    'dynamic-menu-item',
                    { active: this.value == menu.value }
                  ]}
                  onClick={() => this.update(menu.value)}
                >
                  {menu.displayName}
                </div>
              );
            })}
          </div>
        );
      }
    }
  }
};
</script>

<style lang="scss">
.dynamic-panel {
  height: 100%;
  display: flex;

  .dynamic-menu {
    width: 130px;
    border-right: 1px solid $color-border-l2;

    &-item {
      line-height: 30px;
      padding: 0 12px;
      @include text-ellipsis();
      cursor: pointer;

      &:hover {
        background-color: #f5f7fa;
      }

      &.active {
        background-color: $color-primary-light-1;
      }
    }
  }

  .dynamic-content {
    flex: 1;
    display: flex;
    overflow: hidden;

    &-left,
    &-right {
      flex: 1;
      min-width: 50%;
      overflow-y: auto;
    }

    &-right {
      border-left: 1px solid $color-border-l2;
    }
  }
}

::v-deep .el-tree-node__content {
  height: 30px;
}
</style>
